<div class="main-container">
    <div class="search-wrap">
        <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
            <nz-form-item>
                <nz-form-label>选择日期</nz-form-label>
                <nz-form-control>
                    <nz-range-picker formControlName="rangePickerTime"
                                     [nzAllowClear]="false"
                                     [nzPlaceHolder]="['起始日期', '截止日期']"></nz-range-picker>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-control>
                    <button nz-button nzType="primary" (click)="queryInfo()"><i nz-icon nzType="search"></i>查询
                    </button>
                </nz-form-control>
            </nz-form-item>
        </form>
    </div>

    <div class="main-wrap">
        <div class="charts-container">
            <div echarts [options]="basicLineOpts" [merge]="drainChartOpts" class="charts-cell"></div>
        </div>
        <nz-table #dataTable
                  class="main-table"
                  [nzData]="tableData"
                  [nzFrontPagination]="false"
                  [nzLoading]="loading"
                  [nzWidthConfig]="widthConfig"
                  [nzScroll]="scrollConfig"
                  nzBordered
                  nzSize="middle">
            <thead>
            <tr class="custom-head">
                <th rowspan="2">日期</th>
                <th rowspan="2">合计</th>
                <th *ngFor="let col of tableFirstHead" [attr.colspan]="col.colspan">
                    {{col.name}}
                </th>
            </tr>
            <tr class="custom-head">
                <th *ngFor="let col of tableSecondHead">
                    {{col.name}}
                </th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of dataTable.data;let idx = index" [class]="{'even':idx % 2 === 1}">
                <td>{{data.meaTime}}</td>
                <td>{{data.total}}</td>
                <td *ngFor="let col of tableSecondHead">
                    {{getTableColData(data.data, col.id)}}
                </td>
            </tr>
            </tbody>
        </nz-table>
    </div>
</div>
